<!-- 详情 -->
<template>
    <div class="drawer-layout">
        <el-drawer :title="productConfigTitle" :visible.sync="drawer" @closed="closedinvitation" size="70%"
            :wrapperClosable="false">
            <el-alert v-if="productConfigTitle=='配置奖池商品'" style="margin-bottom:20px;" title="说明:" type="warning" :closable="false">
                用户在满足以下配置的商品消费条件时才能使用符合条件的奖池
            </el-alert>
            <div class="layout">
                <div class="configform-box">
                    <el-form label-position="left" :inline="true" size="small" ref="eventsForm" :model="eventsForm">
                        <el-form-item label="关键字" class="form-box-item" label-width="50px" prop="activity_name">
                            <el-input placeholder="请输入关键字" v-model="eventsForm.activity_name">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="分类" class="form-box-item" label-width="50px" prop="cate_id">
                            <el-cascader v-model="eventsForm.cate_id" :options="categoryList" :props="{
                                checkStrictly: true,
                                value: 'id',
                                label: 'name',
                                children: 'children',
                            }" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="height:30px;" @click="inquire">查询</el-button>
                            <el-button style="height:30px;" @click="resetForm('eventsForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="configform-box">
                    <el-button type="primary" style="height:30px;margin-bottom:20px;"
                        @click="ifShowadd = true; addproductTitle = '添加商品'">添加</el-button>
                    <el-button type="primary" style="height:30px;" @click="Batchdeletion">批量移除</el-button>
                    <div>
                        <el-table v-if="productConfigTitle=='配置奖池商品'" v-loading="loading" highlight-current-row :data="tablevalue.productlist"
                            :header-cell-style="{
                                'background-color': '#f3f8fe',
                                color: '#606266',
                                height: '50px',
                            }" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column align="center" prop="name" label="商品名称"></el-table-column>
                            <el-table-column align="center" prop="sort" label="商品分类"></el-table-column>
                            <el-table-column align="center" prop="images" label="商品图片">
                                <template slot-scope="{row}">
                                    <el-image :src="row.images" style="width:50px;height:50px;" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="shop" label="所属店铺"></el-table-column>
                            <el-table-column align="center" prop="shop" label="商品价格"></el-table-column>
                            <el-table-column align="center" prop="shop" label="结算方式"></el-table-column>
                            <el-table-column fixed="right" width="100" prop="address" label="操作" align="center">
                                <template slot-scope="{row,$index}">
                                    <el-button type="text" @click.native="handleEdit($index, row)">编辑
                                    </el-button>
                                    <el-button type="text" @click.native="handleDelete($index, row)">移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-table v-else v-loading="loading" highlight-current-row :data="tablevalue.productlist"
                            :header-cell-style="{
                                'background-color': '#f3f8fe',
                                color: '#606266',
                                height: '50px',
                            }" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column align="center" prop="images" label="商品图片">
                                <template slot-scope="{row}">
                                    <el-image :src="row.images" style="width:50px;height:50px;" />
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="name" label="商品名称"></el-table-column>
                            <el-table-column align="center" prop="sort" label="商品分类"></el-table-column>
                            <el-table-column align="center" prop="shop" label="所属店铺"></el-table-column>
                            <el-table-column align="center" prop="draws_num" label="赠送抽奖次数">
                                <template slot-scope="{row,$index}">
                                    <el-input v-if="isshow[$index]" v-model="row.draws_num"
                                        placeholder="请输入赠送抽奖次数"></el-input>
                                    <span v-if="!isshow[$index]">{{ row.draws_num }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="limit_num" label="限购数量">
                                <template slot-scope="{row,$index}">
                                    <el-input v-if="isshow[$index]" v-model="row.limit_num"
                                        placeholder="请输入限购数量"></el-input>
                                    <span v-if="!isshow[$index]">{{ row.limit_num }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" width="100" prop="address" label="操作" align="center">
                                <template slot-scope="{row,$index}">
                                    <el-button type="text" @click.native="handelCancel($index, row)"
                                        v-if="isshow[$index]">确定
                                    </el-button>
                                    <el-button type="text" @click.native="handleEdit($index, row)" v-if="!isshow[$index]">编辑
                                    </el-button>
                                    <el-button type="text" @click.native="handleDelete($index, row)">移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination v-show="tablevalue.total > 0" :total="tablevalue.total" :page.sync="tablevalue.page"
                            :limit.sync="tablevalue.count" @pagination="gettable" />
                    </div>
                </div>
            </div>
        </el-drawer>
        <addproduct v-if="ifShowadd" :addproductTitle="addproductTitle" />
    </div>
</template>
<script>
import {
    getCategoryList,
} from "@/api/commodity/index";
import addproduct from './addproduct'
export default {
    name: 'detail',
    props: ["productConfigTitle"],
    components: {
        addproduct
    },

    data() {
        return {
            drawer: true,
            // 商品类目列表
            categoryList: [],
            eventsForm: {
                award_name: "",
                cate_id: '',
            },
            loading: false,
            tablevalue: {
                page: 1,
                count: 10,
                total: 3,
                productlist: [],
            },
            productlist: [
                { images: 'https://mj-1320609740.cos.ap-nanjing.myqcloud.com/2023-12/29/164921_75583.jpg', name: '商品名称', sort: '商品分类', shop: '所属店铺', draws_num: '1', limit_num: '2' },
                { images: 'https://mj-1320609740.cos.ap-nanjing.myqcloud.com/2023-12/29/164921_75583.jpg', name: '商品名称', sort: '商品分类', shop: '所属店铺', draws_num: '1', limit_num: '2' },
                { images: 'https://mj-1320609740.cos.ap-nanjing.myqcloud.com/2023-12/29/164921_75583.jpg', name: '商品名称', sort: '商品分类', shop: '所属店铺', draws_num: '1', limit_num: '2' },
            ],
            multipleSelection: [],
            addproductTitle: '',
            ifShowadd: false,
            isshow: [],
        };
    },
    created() {
        this.getConfigurationWay();
    },
    methods: {
        getConfigurationWay() {
            getCategoryList().then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                    return this.$messages.error(res.msg);
                }
                this.categoryList = res.data;
            });
        },
        inquire() {
            this.loading = true;
            this.tablevalue.productlist = this.productlist;
            this.loading = false;
        },
        // 关闭抽屉
        closedinvitation() {
            this.$parent.closeConfig();
        },
        gettable() {
            this.loading = true;
            this.tablevalue.dataList = this.dataList1;
            this.loading = false;
        },
        handleSelectionChange() {

        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        closeaddproduct() {
            this.ifShowadd = false;
        },
        //点击编辑
        handleEdit(index, row) {
            this.$set(this.isshow, index, true)
        },
        //取消编辑
        handelCancel(index, row) {
            this.$set(this.isshow, index, false)
        },

        //点击更新
        handleUpdate(formName) {

        },
        //点击删除
        handleDelete(index, row) {
            this.$confirm('确定要将该商品在本活动中移除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '移除成功!'
                });
            }).catch(() => {
            });
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //批量删除
        Batchdeletion() {
            if (this.multipleSelection.length == 0) {
                this.$alert('请选择商品', '提示', {
                    confirmButtonText: '确定',
                    callback: action => { }
                });
            } else {
                this.$confirm('确定要将已选择商品在本活动中移除除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                });
            }
        }

    },
};
</script>
<style lang="scss">
.drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    .el-drawer__body {
        overflow: auto;
    }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
        display: none;
    }

    .el-drawer__header {
        background-color: #409EFF;
        color: #ffffff;
        padding: 10px 20px;
        margin-bottom: 10px;
    }

    .el-tabs__header {
        padding-left: 50px;
        margin: 0;
    }

    .el-tabs__item {
        padding: 0 40px;
    }

    .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        z-index: 1;
    }

    .el-alert--warning.is-light .el-alert__description {
        color: #c77b04;
        font-size: 14px;
    }

    .configform-box {
        .form-box-item {
            .el-form-item__label {
                font-size: 12px;
                font-weight: 500;
                width: 80px;
            }

            .el-input {
                width: 200px;
            }
        }
    }

}
</style>
<style lang="scss" scoped>
.blockquote-box {
    border-left: 4px solid #409EFF;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
}

.configform-box {
    margin: 0 20px;

    .form-box-item {
        padding-bottom: 10px;
        padding-right: 20px;
        font-size: 12px;
        color: #4c4c4c;

        .form-tip {
            font-size: 12px;
            color: #4c4c4c;

            .tip-key {
                font-weight: bold;
                text-decoration: underline;
            }
        }
    }

    .table-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .table-top-left {
            display: flex;

            div {
                margin-right: 20px;
            }
        }

        .table-top-right {
            display: flex;

            div {
                margin-left: 20px;
            }
        }
    }

    .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
    }
}

.button-box {
    margin-left: 30px;
    margin-bottom: 20px;

    .next-button {
        background-color: #eeeeee;
        color: #4c4c4c;
        height: 30px;
    }
}

.edit-cell {
    width: 80px;
    border: none;
    background: none;

}
</style>